<template>
  <div class="write-blogArticle">
    <div class="form">
      <el-input v-model="form.title" placeholder="项目标题"></el-input>
      <el-button type="primary" @click="openDrawer">项目设置</el-button>
    </div>
    <MyEditor ref="editor"></MyEditor>
    <el-drawer :visible.sync="drawer" :with-header="false">
      <el-form ref="form" :model="form" label-width="100px" class="drawer-card">
        <el-form-item label="是否支持修改">
          <el-radio-group v-model="form.isUpdate">
            <el-radio v-for="item, index in commonYnStatus" :key="index" :label="parseInt(item.dictValue)">{{
              item.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否支持部署">
          <el-radio-group v-model="form.isDeploy">
            <el-radio v-for="item, index in commonYnStatus" :key="index" :label="parseInt(item.dictValue)">{{
              item.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否支持讲解">
          <el-radio-group v-model="form.isTeach">
            <el-radio v-for="item, index in commonYnStatus" :key="index" :label="parseInt(item.dictValue)">{{
              item.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="源码价格">
          <el-input v-model="form.price" placeholder="源码价格"></el-input>
        </el-form-item>
        <el-form-item label="在线地址">
          <el-input v-model="form.projectUrl" placeholder="在线地址"></el-input>
        </el-form-item>
        <el-form-item label="介绍视频">
          <el-input v-model="form.videoUrl" placeholder="介绍视频"></el-input>
        </el-form-item>
        <el-form-item label="项目封面">
          <MyUpload ref="childUpload" @callParent="transDownloadUrl"></MyUpload>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="updateAsProject">更新项目</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { updateProject, getProject } from '@/api/blog/project';
import { listFrontData } from '@/api/system/dict/data';
import MyEditor from '../components/editor';
import MyUpload from '@/components/MyUpload';

export default {
  name: 'blog-project-admin-edit',
  components: {
    MyEditor,
    MyUpload
  },
  data() {
    return {
      form: {},
      drawer: false,
      categoryList: [],
      tagList: [],
      isEdit: false,
      commonYnStatus: [],
      defaultIntroduce: "## 一、相关技术\n\n\n## 二、相关软件\n\n\n## 三、功能描述\n\n\n## 四、项目截图",
    }
  },
  mounted() {
    this.getCommonYnStatus();
    this.getProjectInfo();
  },
  methods: {
    getProjectInfo() {
      getProject(this.$route.params.projectId).then((res) => {
        this.form = res.data;
        this.$nextTick(() => {
          this.$refs.editor.contentEditor.setValue(res.data.mdContent);
        });
      })
    },
      getCommonYnStatus() {
      listFrontData({
        dictType: "common_yn_status"
      }).then((res) => {
        this.commonYnStatus = res.rows;
      })
    },
    transDownloadUrl(url) {
      this.form.projectCover = url;
    },
    updateAsProject() {
      this.onSubmit();
    },
    onSubmit() {
      this.form.mdContent = this.$refs.editor.contentEditor.getValue();
      this.form.htmlContent = this.$refs.editor.contentEditor.getHTML();
      updateProject(this.form).then((res) => {
        this.$message.success("发布成功");
      })
    },
    openDrawer() {
      this.drawer = true;
      if (this.form.projectCover != null) {
        this.$nextTick(() => {
          this.$refs.childUpload.setImgUrl(this.form.projectCover);
        });
      }
    }
  },
}
</script>

<style scoped>
.write-blogArticle {
  margin: 0 auto;
  padding: 20px;
}

.form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form .el-input {
  font-size: 20px;
}

.drawer-card {
  padding: 20px;
}

::v-deep input[aria-hidden="true"] {
  display: none !important;
}

::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}
</style>
